"use client";
import { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { NavBar } from "antd-mobile";
// import image from "/img(3)/image.png";
import image1 from "/img(1)/image(1).png";
import image2 from "/img(4)/image(1).png";
import image3 from "/img(4)/image(2).png";
import image4 from "/img(4)/image.png";

const products = [
  {
    id: 1,
    name: "善托 霉拮吸入粉雾剂",
    image: image1,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    tag: "季节用药",
  },
  {
    id: 2,
    name: "美林 布洛芬小儿混悬液",
    image: image2,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    tag: "上海制药",
  },
  {
    id: 3,
    name: "小儿咳喘灵口服液",
    image: image3,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    tag: "上海制药",
  },
  {
    id: 4,
    name: "善托 霉拮吸入粉雾剂",
    image: image1,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    tag: "季节用药",
  },
  {
    id: 5,
    name: "美林 布洛芬小儿混悬液",
    image: image4,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    tag: "上海制药",
  },
];

export default function Xiangq() {
  




  const { id } = useParams();
  const product = products.find((item) => item.id === Number(id));
  const navigate = useNavigate();
  const back = () => {
    navigate(-1);
  };
  if (!product) {
    return (
      <div style={{ padding: 32, textAlign: "center", color: "#888" }}>
        未找到该商品
      </div>
    );
  }

  return (
    <>
      <NavBar onBack={back}>
        <h3
          style={{
            textAlign: "center",
            fontSize: 28,
            fontWeight: 700,
            color: "#3b3b3b",
            letterSpacing: 2,
            marginBottom: 36,
            textShadow: "0 2px 8px rgba(60,60,100,0.08)",
          }}
        >
          商品详情
        </h3>
      </NavBar>
      <div
        style={{
          maxWidth: 480,
          margin: "0 auto",
          background: "#fff",
          borderRadius: 16,
          boxShadow: "0 2px 8px rgba(0,0,0,0.06)",
          padding: 24,
          marginTop: 24,
        }}
      >
        <img
          src={product.image}
          alt={product.name}
          style={{
            width: "100%",
            height: 180,
            objectFit: "contain",
            borderRadius: 12,
            background: "#f6f6f6",
            marginBottom: 16,
          }}
        />
        <div style={{ fontWeight: 600, fontSize: 20, marginBottom: 8 }}>
          {product.name}
        </div>
        <div style={{ color: "#888", fontSize: 15, marginBottom: 8 }}>
          {product.desc}
        </div>
        <div
          style={{
            color: "#f40",
            fontWeight: 600,
            fontSize: 22,
            marginBottom: 8,
          }}
        >
          ￥{product.price.toFixed(2)}
        </div>
        <div
          style={{
            color: "#aaa",
            textDecoration: "line-through",
            marginBottom: 8,
          }}
        >
          ￥{product.oldPrice.toFixed(2)}
        </div>
        <div style={{ color: "#ffb300", fontSize: 14, marginBottom: 8 }}>
          仅剩{product.stock}件
        </div>
        <button
          style={{
            width: "100%",
            background: "#19c37d",
            color: "#fff",
            border: "none",
            borderRadius: 8,
            padding: "12px 0",
            fontSize: 18,
            fontWeight: 600,
            marginTop: 16,
            cursor: "pointer",
          }}
        >
          加入清单
        </button>
      </div>
    </>
  );
}
